<!--  -->
<template>
    <van-notify
        :show="showNotify"
        type="warning"
        background="#FAEBD7">
        <van-cell class="cell">
            <template #title>
                <div class="message-text">
                    <span class="type-icon">
                        <i
                            class="iconfont"
                            :class=" messageiconMap[msg.type]" />
                    </span>
                    <span class="title">{{ msg.title }}</span>
                    <span class="main">{{ msg.main }}</span>
                    <span class="text">{{ msg.message }}</span>

                </div>
            </template>
            <template #label>
                <div class="message-time">
                    {{ msg.time }}
                </div>
            </template>
            <template #extra>
                <van-icon
                    class="closebtn"
                    name="cross"
                    @click="onClick" />
            </template>
        </van-cell>
    </van-notify>
</template>

<script>
export default {
    props: {
        messages: Array
    },
    data () {
        return {
            messageIndex: 0,
            messageiconMap: {
                info: 'icon-xiaoxi',
                warning: 'icon-msnui-alarm-triangle'
            }
        };
    },
    watch: {
        messages (newval, oldvel) {
            this.messageIndex = 0;
        }

    },
    computed: {

        showNotify () {
            return (
                this.messages.length > 0 && this.messageIndex < this.messages.length
            );
        },
        msg () {
            var index = this.messageIndex;
            if (index >= this.messages.length) {
                index = this.messages.length - 1;
            }
            return (
                this.messages[index] || {
                    type: '',
                    title: '',
                    main: '',
                    message: '',
                    time: ''
                }
            );
        }
    },
    methods: {
        onClick () {
            this.messageIndex++;
        }
    },
    created () {
        if (this.messages.length > 0) {
            this.show = true;
        }
    },

    components: {}
};
</script>

<style lang="scss"  scoped>
.cell {
  background-color: transparent;
}
.message-text {
  text-align: left;
  margin: 0;
}
.message-text .type-icon {
  margin-right: 5px;
}
.message-text .title {
  //   margin: 0 5px;
  margin: auto;
  width: auto;
}
.message-text .main {
  font-weight: 600;
  font-size: 14px;
  margin: 0 5px;
}

.message-time {
  text-align: left;
  margin: 10px 0px 0px;
}
.closebtn {
  margin: auto;
  font-size: 24px;
}
</style>
